<template lang="pug">
  .scene.scene-jd.page-head.pos-r(v-if="getSceneStatus && sceneList", ref="sceneWrap")
    HeadBar(title="场景列表", @closeBar="goBackHide")
    .scene-wrap
      van-tabs(:active="active", @change="handleGroup")
        van-tab(v-for="(group, index) in getSceneGroup", :key="index", :title="group.album")
          Scroll(v-if="group.scenelist", :data="group.scenelist", ref="scrollSceneWrap")
            ul.scene-list(@click="goBackHide")
              li.scene-list-item.pos-r(
                ref="sceneItem",
                v-for="(item, idx) in group.scenelist",
                :key="item.scene_id",
                :class="{'active': sceneIndex == idx}",
                @click="handleScene(item, idx)")
                i.iconfont.icon-info(v-if="item.dec", @click.stop='showSceneInfo(item.title, item.dec)')
                .lock(v-if="item.isLock == 1")
                  i.iconfont.icon-lock
                .img-box
                  img(:src="item.full_thumb_url")
                .text.omit(:style="sceneIndex == idx ? getColorStyle : ''")
                  p(ref="text") {{item.title}}
</template>

<script>
import Scroll from 'Comps/Scroll'

import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'
import headBarMixin  from '@/mixins/headBar'


export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin, headBarMixin],
  data() {
    return {
      active: 0
    }
  },
  computed: {
    getStatus() {
      return this.showScene
    }
  },
  methods: {
    // 重新mixin里的方法，置空初始化方法
    initListWidth() {},
    handleGroup(index, title) {},
    handleScene(item, idx) {
      this.showScene = false
      this.handleSceneSwitch(item, idx)
      // this.$parent.changeZindex(10)
    },
    goBackHide() {
      this.showScene = false
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/scene.styl'
@import '../../../assets/styles/mixin.styl'
$black = #000
.theme-app-c
  .scene
    padding: 0
  .scene-jd
    full-cover()
    position: fixed
    z-index: 100
    .scene-wrap
      width: 100%
      height: 100%
      background-color: #fff
      .van-tabs--line, .van-tab__pane, .van-tab__pane .wrapper
        height: 100%
      .van-tabs__wrap
        z-index 2  
      .van-tabs__content
        position: fixed
        top: 85px
        bottom: 0
        left: 0
        right: 0
      .scene-list
        display: flex
        justify-content: center
        flex-wrap: wrap
        padding-left: 0
        .scene-list-item
          min-width: 80px
          height: 80px
          margin-top: 10px
          overflow: hidden
          text-align: center
          .lock
            line-height: 80px
          .text
            background-color: rgba($black,.5)
</style>
